import prompt from '@system.prompt';
import router from '@system.router';
export default {
    data: {
        countDownCount:5,
        total:10000,
        count:10000,
        buttonTexts:["开始",'记时中','重新开始'],
        buttonText:'',
        buttonTextIndex:-1,
        timer:null,
        percent:10,
        secondaryPercent:0,
        prevTime:0,
        progressClass:'opacity0',
        timerCount:0,
        popupTopClass:'top50',
        disableButton:true,
        fade:"fadeIn"
    },
    onShow(){
        this.setButtonText(0);
        // this.setTimeComplete()
    },
    changeCountDownCount({value}){
        this.countDownCount = value;
    },
    setTimeComplete(){
        if(!this.countDownCount || isNaN(this.countDownCount))return;
        this.disableButton = false;
        this.total = this.countDownCount * 1000;
        this.count = this.countDownCount * 1000;
        this.fade = 'fadeOut'

        this.animation(1,(index) => this.popupTopClass = 'top'+ (50+ index*5),undefined,10)
    },
    beginCountDown(){
        this.handleStart();

        this.timer = requestAnimationFrame(this.beginCountDown)

        this.count = this.count - (Date.now() - this.prevTime);

        this.percent =100 - this.count/this.total  * 100;

        this.secondaryPercent = Math.min(100,this.percent + 10);

        this.handleEnd();
        this.prevTime = Date.now();
    },
    handleStart(){
        //重新开始
        if(this.buttonTextIndex == 2){
            this.count = this.total;
            this.percent =0
            this.secondaryPercent = 0
        }
        //开始时
        if(!this.buttonTextIndex || this.buttonTextIndex===2){
            this.prevTime = Date.now();
            this.animation(1,(index) => {
                this.progressClass = 'opacity'+ index;
            })
            this.setButtonText(1)
            this.fade = 'fadeOut'
        }
    },
    handleEnd(){
        if(this.count > 0)return;
        this.fade = 'fadeIn'
        cancelAnimationFrame(this.timer)
        this.setButtonText(2)
        this.count = 0;
        this.wait(() => {
            this.animation(0,(index) => {
                this.progressClass = 'opacity'+ index;
            },() => {
                this.percent =0
                this.secondaryPercent =0;
            })
        })
        prompt.showToast({message:'光阴如梭'})
        // prompt.showDialog({message:'重新开始？'})
    },
    wait(callback,delay=300){
        setTimeout(callback,delay)
    },
    setButtonText(index){
        if(index === this.buttonTextIndex)return;
        this.buttonText = this.buttonTexts[index];
        this.buttonTextIndex = index;
    },
    animation(opacity,callback,complete,tick=10){
        if(this.handler == null){this.timerCount =0;}

        this.handler = requestAnimationFrame(() => {
            this.animation(opacity,callback,complete,tick)
        })

        let index = opacity ? this.timerCount : 10 - this.timerCount;

        callback && callback(index);
        this.timerCount += 10 / tick;

        if(this.timerCount > 10){
            cancelAnimationFrame(this.handler)
            this.handler = null;
            complete && complete();
        }
    },
    back(){
        router.replace({
            uri: 'pages/index/index',
        });
    }
}

class ElementOpacityAnimation_ {
    constructor(el) {
        this.el= el;
    }

    to(opacity,duration){
        this._opacity = opacity;
        this._duration = duration * 1000;
        this._prevOpacity = this.el.style.opacity;
        this._diff = opacity - this.el.style.opacity;
        this._prevDate =  Date.now();
        this._useTime = 0;
        this.effect();
    }

    effect(){
        this.requestId = requestAnimationFrame(() => {
            this.effect()
        })
        const frameTime = Date.now() - this._prevDate;
        this._useTime+=frameTime;
        const percent = this._useTime / this._duration;

        this.el.style.opacity = this._prevOpacity + percent * this._diff;
        this._prevDate =  Date.now();

        if(this._useTime >= this._duration){
            this.el.style.opacity = this._opacity;
            cancelAnimationFrame(this.requestId)
        }

    }
}